<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      title="停车位置修改"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      :width="'700px'"
    >
      <el-form
        :model="fm.ps"
        :ref="fm.fname"
        :label-width="'100px'"
        class="demo-form-inline"
        @keyup.enter.native="onSubmit"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="停靠位置"
              prop="dockedAddress"
              :rules="[
                {
                  required: true,
                  message: '停靠位置',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model="fm.ps.dockedAddress"
                placeholder="请选择停靠位置"
                @focus="showMap"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="停靠简称" prop="simpleDockedAddress">
              <el-input
                v-model="fm.ps.simpleDockedAddress"
                placeholder="请填写停靠简称"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item prop="find">
              <el-button
                @click="onSubmit"
                :disabled="fm.sb.load"
                type="primary"
              >
                {{ fm.sb.text }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <MyMap
      style="height: 400px"
      v-if="isShowMap"
      :state="isShowMap"
      :title="'选择停车场'"
      @getMdState="getAmapState"
      @getMapData="getMapData"
      :backSearchObj="fm.cluData"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
// import MyMap from "../MyAmap"; "@/views/tpls/tp-amap";
import MyMap from "@/views/tpls/tp-amap";

import { setPosition } from "@/api/services/logistics.service";
export default {
  name: "addEditPosi",
  directives: { elDragDialog },
  props: ["state", "posiId", "backObj"],
  components: { MyMap },
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      isShowMap: false,
      md: { state: this.state },
      fm: {
        fname: "addStopOffLine",
        sb: { load: false, text: "提交预约" },
        ps: {
          dockedAddress: "", // 全称
          simpleDockedAddress: "", // 简称
          dockedLatLon: "", // 经纬度
        },
        cluData: {
          lng: "",
          lat: "",
          address: "",
        },
      },
    };
  },
  created() {
    if (this.backObj) {
      const {
        dockedAddress: address,
        dockedLatLon,
        simpleDockedAddress,
      } = this.backObj;
      const lng = dockedLatLon.split(",")[0];
      const lat = dockedLatLon.split(",")[1];
      this.fm.cluData = { address, lng, lat };
      this.fm.ps = {
        dockedAddress: address,
        simpleDockedAddress,
      };
    }
  },
  methods: {
    init() {},
    showMap() {
      this.isShowMap = true;
    },
    getAmapState(e) {
      this.isShowMap = e;
    },
    getMapData(e) {
      if (!e) return;
      const { address, lng, lat } = e;
      console.log(e, "ess");

      this.fm.ps.dockedAddress = address;
      this.fm.ps.dockedLatLon = `${lat},${lng}`;
      this.isShowMap = false;
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("addEditPositionMdState", false);
    },
    /**
     * 表单提交=--- 查询
     */
    onSubmit() {
      this.$refs[this.fm.fname].validate((valid) => {
        if (!valid) {
          this.U.qerror("请填写必填项");
          return false;
        } else {
          const pd = {
            ...this.fm.ps,
            dockedLatLon: this.fm.ps.dockedLatLon || this.backObj.dockedLatLon,
            vehicleId: this.posiId,
          };
          this.fm.sb.load = true;
          setPosition(pd)
            .then((res) => {
              if (res.code == 1) {
                this.U.qsuccess("提交成功");
                this.fm.sb.load = false;
                // 调用父组件方法-重新加载数据
                this.$emit("reloadDg");
                this.closeMd();
              } else {
                this.U.qsuccess(res.msg);
                this.fm.sb.load = false;
              }
            })
            .catch((err) => {
              this.fm.sb.load = false;
            });
        }
      });
    },
  },
};
</script>